<template>
    <transition name="modal">
        <div class="mask" v-if="showModal">
            <div class="tip">
                <div class="content">
                    <div class="header">
                        <slot name="header"></slot>
                    </div>
                    <div class="body">
                        <slot name="body"></slot>
                    </div>
                    <div class="footer">
                        <slot name="footer"></slot>
                        <!-- &nbsp; -->
                        <button @click="$emit('close')">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
   
</template>
<script>
export default {
    props:{
        showModal:Boolean
    }
}
</script>
<style lang="scss" scoped>
    .mask{
        position: fixed;
        z-index: 9998;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.5);
        display: table;
    }
    .tip{
        display: table-cell;
        vertical-align: middle;
    }
    .content{
        margin: auto;
        width: 300px;
        box-sizing: content-box;
        padding: 20px 30px;
        background: #fff;
        border-radius: 2px;
        box-shadow: #000000 0 2px 8px;
        transition: all .5s ease;
        .header{
            color: rgb(14, 236, 14);
        }
        .body{
            width: 200px;
            margin: 20px 0;
        }
        .footer{
            overflow: hidden;
            button{
                float: right;//清除浮动 可以在内容加&nbsp;
                width: 80px;
                height: 35px;
                border-radius: 3px;
                border: 1px solid #666;
                background: blue;
                font-size: 14px;
                color: #fff;
            }
        }
    }
    .modal-enter{
        opacity: 0;
    }
    .modal-enter-active,.modal-leave-active{
        transition: all .3s ease
    }
    .modal-leave-to {
        opacity: 0;
    }
    .modal-leave-active .content{
        transform: scale(1.2)
    }
</style>